<template>
  <div>
    <el-card class="box-card" style="width: fit-content;margin: 10px">

      <el-form :model="switchForm" :rules="switchRules" ref="switchForm">
        <el-form-item>
          <p>
            <span style="font-size: 16px">
              <strong>选课权限 </strong>
            </span>
            <el-tag :type="statusStyle" size="large" style="width: max-content; font-size: 14px">{{ statusText }}</el-tag>
          </p>
        </el-form-item>
        <el-form-item prop="statu">
          <el-radio-group v-model="switchForm.statu" >
            <el-radio label="0">关闭</el-radio>
            <el-radio label="1">一轮选课</el-radio>
            <el-radio label="2">二轮选课</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-popconfirm title="确定要修改选课权限吗？" @confirm="submitSwitchForm('switchForm')" >
            <el-button type="primary" slot="reference" >确定更改</el-button>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "CourseSwitch",
  data() {
    return{
      switchForm:{},
      secondForm:{},
      switchRules: {
        statu:[
          {required:true, message:"必填",trigger:"blur"}
        ]
      },
      statusText:"",
      statusStyle:"",
    }
  },
  created() {
    this.getCourseStatus()
  },
  methods:{
    //获取当前选课状态
    getCourseStatus(){
      this.$axios.get('sys/user/switch/get').then(res => {
        console.log("状态是:",res.data.data)
        //关闭
        if(res.data.data === 0){
          this.statusText="关闭"
          this.statusStyle="danger"
        }
        //一轮选课
        else if(res.data.data=== 1){
          this.statusText="一轮选课"
          this.statusStyle="success"
        }
        //二轮选课
        else if(res.data.data=== 2){
          this.statusText="二轮选课"
          this.statusStyle="success"
        }
        else{
          this.statusText="未设置"
          this.statusStyle="info"
        }
      })
    },
    //提交修改状态表单
    submitSwitchForm(formName) {
      this.$refs[formName].validate((valid) => {
          let statuValue=this.switchForm.statu-0
        if (valid) {
          this.$axios({
              method:'POST',
              url:'/sys/user/switch',
              data:{
                  statu:statuValue
              },
          })
              .then(res => {
                console.log(res.data)
                this.$message({
                  showClose: true, message: '恭喜你，操作成功', type: 'success',
                  onClose: () => {
                    this.getCourseStatus()
                  }
                });
              })
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
  }

}
</script>

